var areaJson = {
    "type": "node",
    "direction": "x",
    "child": [{
        "unitType": "px",
        "len": 40,
        "className": "left_arrow",
        "content": {
            "type": "leaf",
            "fill": [{
                "tag": "img",
                "src": "images/home/xiangzuo.png"
            }]
        }
    }, {
        "unitType": "px",
        "len": 1200,
        "content": {
            "type": "node",
            "direction": "x",
            "child": [{
                "unitType": "px",
                "len": 428,
                "content": {
                    "type": "node",
                    "direction": "y",
                    "child": [{
                        "unitType": "px",
                        "len": 298,
                        "focus": true,
                        "className": "ver_box_style",
                        "div": true,
                        "id": "",
                        "content": {
                            "type": "leaf",
                            "fill": [{
                                "tag": "img",
                                "src": "images/home/tu_1.png"
                            }, {
                                "tag": "p",
                                "text": "公牛vs雷霆 75:84 直播中"
                            }]
                        }
                    }, {
                        "unitType": "px",
                        "len": 190,
                        "content": {
                            "type": "leaf",
                            "list": [{
                                "tag": "ul",
                                "col": 2,
                                "number": 2,
                                "focus": true,
                                "className": "ver_box_style",
                                "fill": [{
                                    "tag": "img",
                                    "src": "images/home/tu_2.png"
                                }, {
                                    "tag": "p",
                                    "text": "钓鱼比赛合集"
                                }]
                            }]
                        }
                    }]
                }
            }, {
                "unitType": "px",
                "len": 282,
                "focus": true,
                "className": "ver_box_style",
                "content": {
                    "type": "leaf",
                    "fill": [{
                        "tag": "img",
                        "src": "images/home/tu_4.png"
                    }, {
                        "tag": "p",
                        "text": "2017男子世界循环赛"
                    }]
                }
            }, {
                "unitType": "px",
                "len": 490,
                "content": {
                    "type": "leaf",
                    "list": [{
                        "tag": "ul",
                        "col": 2,
                        "number": 4,
                        "focus": true,
                        "className": "ver_box_style",
                        "fill": [{
                            "tag": "img",
                            "src": "images/home/tu_5.png"
                        }, {
                            "tag": "p",
                            "text": "2017男子世界循环赛"
                        }]
                    }]
                }
            }]
        }
    }, {
        "unitType": "px",
        "len": 40,
        "className": "left_arrow",
        "content": {
            "type": "leaf",
            "className": "right_arrow",
            "fill": [{
                "tag": "img",
                "src": "images/home/xiangyou.png"
            }]
        }
    }]
}
var configUrl = "http://127.0.0.1:8000/custom-templates/";
// $("html body").html("<div id='AREA001' style='width:1280px;height:488px;margin:auto;background:'>"+getAreaHtml(areaJson,"AREA001")+"</div>");
function getAreaHtml(data, name) {
    var direction = data.direction;
    var str = "";
    if (data.type == "leaf") {
        if (data.list) {
            $.each(data.list, function(i, el) {
                str += getTag(el, name);
            })
        } else {
            $.each(data.fill, function(i, el) {
                str += getTag(el, name);
            })
        }
    } else if (data.type == "node") {
        $.each(data.child, function(i, el) {
            child_name = name + direction + i;
            str += "<div " + getAttr(child_name, el, direction) + ">" + getAreaHtml(el.content, child_name) + "</div>"
        })
    }
    return str;
}

function createLi(data, name) {
    var col = data.col;
    var row = data.number / data.col;
    var className = data.className ? data.className : "";
    var tag = "";
    var str = "";
    var tabindex = data.focus ? " tabindex='-1'" : "";
    $.each(data.fill, function(i, el) {
        tag += getTag(el, name);
    })
    for (var i = 0; i < data.number; i++) {
        str += "<li class='" + className + "' style='float:left;width:" + 100 / col + "%;height:" + 100 / row + "%'" + tabindex + ">" + tag + "</li>"
    }
    return str;
}

function getTag(data, name) {
    var str = "";
    switch (data.tag) {
        case "img":
            str += "<img src='" + configUrl + data.src + "'>"
            break;
        case "span":
            str += "<span>" + data.text + "</span>"
            break;
        case "p":
            str += "<p>" + data.text + "</p>"
            break;
        case "h1":
            str += "<h1>" + data.text + "</h1>"
            break;
        case "h2":
            str += "<h2>" + data.text + "</h2>"
            break;
        case "h3":
            str += "<h3>" + data.text + "</h3>"
            break;
        case "h4":
            str += "<h4>" + data.text + "</h4>"
            break;
        case "h5":
            str += "<h5>" + data.text + "</h5>"
            break;
        case "ul":
            str += "<ul style='width:100%;height:100%;overflow:hidden' id='" + name + "ul'>" + createLi(data, name) + "</ul>"
            break;
    }
    return str;
}
//盒子大小样式
function getAttr(child_name, data, direction) {
    var attr = "";
    var className = data.className ? data.className : "";
    var len = data.len;
    var type = data.unitType;
    var tabindex = data.focus ? " tabindex='-1'" : "";
    switch (type) {
        case "px":
            style = direction.toUpperCase() === "X" ? "width:" + len + "px;height:100%" : "width:100%;height:" + len + "px";
            className += data.style ? data.style : "";
            attr = "id=" + child_name + " class='" + className + "' style='" + style + ";float:left'" + tabindex;
            break;
        case "percent":
            style = direction.toUpperCase() === "X" ? "width:" + len + "%;height:100%" : "width:100%;height:" + len + "%";
            className += data.style ? data.style : "";
            attr = "id=" + child_name + " class='" + className + "' style='" + style + ";float:left'" + tabindex;
            break;
        case "grid":
            style = "width:" + (len / 12) * 100 + "%;height:100%";
            className += data.style ? data.style : "";
            attr = "id=" + child_name + " class='" + className + "' style='" + style + ";float:left'" + tabindex;
            break;
    }
    return attr;
}